<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <form action="" enctype="multipart/form-data"></form> -->
    <h1>我是产品页面</h1>
    <input type="file" class="img" />
    <img src="" />
    
    <button class="btn">点击我上传文件</button>
    <script>
        // 一、图片的预览 二、图片的上传
        // 一、图片的预览
        let imgEle =  document.querySelector(".img")
        imgEle.onchange = function(){
            // console.log("改了");
            // 1.通过js获取图片文件 对象
            console.log(this.files[0]);
            // 2.可以把图片文件对象转成base64格式
            let fileReader = new FileReader();
            fileReader.readAsDataURL(this.files[0]);
            fileReader.onload = function(){
                // console.log(fileReader.result)
                let imgele = document.createElement("img");
                imgele.src = fileReader.result;
                document.body.appendChild(imgele);
            }
        }



        // 上传图片到服务器
        let btn = document.querySelector(".btn");
        btn.onclick = function(){
            // 做文件的上传
            // 获取文件
            let img = imgEle.files[0];
            // FormData
            let form  = new FormData();
            form.append("myimg",img);
            form.append("name","张三");
            form.append("age",20);
            let xhr = new XMLHttpRequest();
            // 文件上传只支持 post
            xhr.open("post","/postfile");
            xhr.onload = function(){
                console.log(xhr.responseText);
            }
            xhr.send(form);
        }


    </script>
</body>
</html>